import { NavBar, Form, Input, Button, Switch } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import { Cascader, Field } from 'react-vant'
import options from '../../hooks/options'

function Index() {
  const nav = useNavigate()
  const [form] = Form.useForm()
  const [isDefault, setIsDefault] = useState(false)
  const [selectedRegion, setSelectedRegion] = useState('')

  const handleBack = () => {
    nav(-1)
  }

  const handleRefresh = () => {
    form.resetFields()
    setSelectedRegion('')
    setIsDefault(false)
  }

  const handleSubmit = async (values: any) => {
    try {
      // 构建请求参数
      const params = {
        name: values.name || '',
        phone: values.phone || '',
        city: selectedRegion || '',
        desc: values.detail || '',
        state: isDefault ? '1' : '0'
      }

      console.log('提交地址数据:', params)
      
      // 这里可以调用API
      // const response = await axios.put('/address/add', params)
      
      alert('地址保存成功！')
      nav(-1) // 返回上一页
    } catch (error) {
      console.error('保存地址失败:', error)
      alert('保存失败，请重试')
    }
  }

  return (
    <div style={{background:'#f5f5f5',minHeight:'100vh'}}>
      {/* 顶部导航 */}
      <NavBar 
        onBack={handleBack}
        right={
          <div onClick={handleRefresh} style={{fontSize:'18px',cursor:'pointer'}}>
            🔄
          </div>
        }
      >
        收货地址-添加
      </NavBar>

      {/* 表单内容 */}
      <div style={{padding:'12px'}}>
        <Form
          form={form}
          layout='horizontal'
          onFinish={handleSubmit}
          style={{
            background:'#fff',
            borderRadius:'8px',
            overflow:'hidden'
          }}
        >
          {/* 收货人 */}
          <Form.Item
            name='name'
            label='收货人'
            style={{
              borderBottom:'1px solid #f0f0f0',
              padding:'16px'
            }}
          >
            <Input 
              placeholder='请输入姓名' 
              style={{'--font-size': '16px'}}
            />
          </Form.Item>

          {/* 手机号码 */}
          <Form.Item
            name='phone'
            label='手机号码'
            style={{
              borderBottom:'1px solid #f0f0f0',
              padding:'16px'
            }}
          >
            <Input 
              placeholder='请输入手机号码' 
              type='tel'
              style={{'--font-size': '16px'}}
            />
          </Form.Item>

          {/* 所在地区 */}
          <Form.Item
            style={{
              borderBottom:'1px solid #f0f0f0',
              padding:'16px'
            }}
          >
            <Cascader 
              popup={{ round: true }} 
              title='请选择所在地区' 
              options={options}
              onFinish={(value) => {
                setSelectedRegion(value.map((item: any) => item.text).join(','))
              }}
            >
              {(_, selectedRows, actions) => (
                <Field
                  isLink
                  value={selectedRows.map((el: any) => el.text).join(',')}
                  readOnly
                  label='所在地区'
                  placeholder='请选择所在地'
                  style={{fontSize:'16px'}}
                  onClick={() => actions.open()}
                />
              )}
            </Cascader>
          </Form.Item>

          {/* 详细地址 */}
          <Form.Item
            name='detail'
            label='详细地址'
            style={{
              borderBottom:'1px solid #f0f0f0',
              padding:'16px'
            }}
          >
            <Input 
              placeholder='街道门牌,无需重复地区信息' 
              style={{'--font-size': '16px'}}
            />
          </Form.Item>

          {/* 设为默认 */}
          <Form.Item
            style={{
              padding:'16px',
              display:'flex',
              justifyContent:'space-between',
              alignItems:'center'
            }}
          >
            <div>
              <div style={{
                fontSize:'16px',
                color:'#333',
                marginBottom:'4px'
              }}>
                设为默认
              </div>
              <div style={{
                fontSize:'12px',
                color:'#999'
              }}>
                每次购买时会默认使用该地址
              </div>
            </div>
            <Switch
              checked={isDefault}
              onChange={setIsDefault}
              style={{
                '--checked-color': '#1677ff'
              }}
            />
          </Form.Item>
        </Form>
      </div>

      {/* 保存按钮 */}
      <div style={{
        position:'fixed',
        bottom:0,
        left:0,
        right:0,
        padding:'16px',
        background:'#fff',
        borderTop:'1px solid #f0f0f0'
      }}>
        <Button 
          block 
          color='primary' 
          size='large'
          onClick={() => form.submit()}
          style={{
            height:'48px',
            fontSize:'16px',
            fontWeight:500
          }}
        >
          保存
        </Button>
      </div>
    </div>
  )
}

export default Index
